<template>
  <div class="container">
    <Breadcrumb :items="['数据库管理', '数据库中心']" />
    <a-spin :loading="loading" style="width: 100%">
      <a-card class="general-card">
        <template #title>
           管理数据库
        </template>
        <a-layout >
          <a-layout>
            <a-layout-content style="width: 60%;">
              <div class="wrapper">
                <a-form
                    ref="formRef"
                    :label-col-props="{ span: 5 }"
                    :wrapper-col-props="{ span: 18 }"
                    :model="formData"
                    class="form"
                >

                  <a-form-item
                      field="name"
                      label="业务名称"
                      :validate-trigger="['change', 'input']"
                      :rules="[{ required: true, message: '请输入数据源自定义名称' }]"
                  >
                    <a-input
                        v-model="formData.name"
                        placeholder="请输入数据源自定义名称"
                    />
                  </a-form-item>


                  <a-form-item
                      field="name"
                      label="业务名称"
                      :validate-trigger="['change', 'input']"
                      :rules="[{ required: true, message: '请输入数据源自定义名称' }]"
                  >
                    <a-select
                        v-model="formData.engine"
                        placeholder="数据源类型"
                    >
                      <a-option value="mysql"> mysql</a-option>
                    </a-select>
                  </a-form-item>
                  <mysql v-if="formData.engine === 'mysql'" :details="formData.details"/>
                </a-form>

                <div class="actions">
                  <a-space>
                    <a-button @click="reset">
                       重置
                    </a-button>
                    <a-button type="primary" :loading="loading" @click="onSubmit">
                      保存
                    </a-button>
                  </a-space>
                </div>
              </div>
            </a-layout-content>
            <a-layout-sider style="width: 37%;">Side</a-layout-sider>
          </a-layout>
        </a-layout>
      </a-card>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import useLoading from '@/hooks/loading';
import {useUserStore} from '@/store';
import {useRoute, useRouter} from "vue-router";
import {FormInstance} from "@arco-design/web-vue/es/form";
import {queryPage,removeRow,addForm,editForm} from '@/api/db';
import {Message} from "@arco-design/web-vue";
import mysql from './components/mysql.vue';

const userStore = useUserStore();
const { loading, setLoading } = useLoading(false);
const step = ref(1);
const router = useRouter();
const formRef = ref<FormInstance>();
const isNew = ref<any>('Y');
isNew.value = router.currentRoute.value.query.isNew ;
const formModel = () => {
  return {
    id: null,
    name: null,
    engine: 'mysql',
    details:{}
  };
};
let formData = reactive(formModel());
const onSubmit = async () => {
  console.log(formData)
  const res = await formRef.value?.validate();
  if(!res){
    if (isNew.value==='Y') {
      await addForm(formData);
    } else {
      await editForm(formData);
    }
  }
}



const reset = async () => {
  formData = formModel();
  await formRef.value?.resetFields();
};

</script>

<script lang="ts">
export default {
  name: 'Step',
};
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  background-color: var(--color-bg-2);
  :deep(.arco-form) {
    .arco-form-item {
      &:last-child {
        margin-top: 20px;
      }
    }
  }
}

.actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  padding: 14px 20px 14px 0;
  background: var(--color-bg-2);
  text-align: center;
}
</style>
